<template>
  <div>
    <el-form :inline="true" :model="queryData" class="demo-form-inline">

      <el-form-item label="任务编号">
        <el-input v-model="queryData.id" placeholder="作业编号"/>
      </el-form-item>

      <el-form-item label="司机姓名">
        <el-input v-model="queryData.driverName" placeholder="司机姓名"/>
      </el-form-item>

      <!--      1为待执行（对应 未发车）、2为进行中（对应在途）、3为待确认（-->
      <el-form-item label="作业状态">
        <el-select v-model="queryData.status" placeholder="任务状态">
          <el-option label="请选择" value="null">请选择</el-option>
          <el-option label="待执行(未发车)" value="1"/>
          <el-option label="进行中(在途)" value="2"/>
          <el-option label="待确认" value="3"/>
        </el-select>
      </el-form-item>

      <el-form-item label="运输任务编号">
        <el-input v-model="queryData.taskTransportId" placeholder="运输任务编号"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        width="55"
      />

      <el-table-column
        type="index"
        width="50"
        label="序号"
      />
      <el-table-column
        fixed
        prop="id"
        label="司机作业编号"
        width="150"
      />

      <el-table-column
        fixed
        prop="driverName"
        label="司机姓名"
        width="150"
      />

      <el-table-column
        fixed
        prop=""
        label="所属运作中心"
        width="150"
      />

      <el-table-column
        fixed
        prop="licensePlate"
        label="车牌号码"
        width="150"
      />

      <el-table-column
        prop="planDepartureTime"
        label="计划发车时间"
        width="300"
      />

      <el-table-column
        prop="actualArrivalTime"
        label="实际到达时间"
        width="120"
      />

      <el-table-column
        prop="taskTransportId"
        label="运输任务编号"
        width="120"
      />

      <!--      为待执行（对应 待提货）、2为进行中（对应在途）、3为改派（对应 已交付）、4为已完成（对应 已交付）、5为已作废。-->
      <el-table-column
        label="作业状态"
        width="120"
      >
      <template slot-scope="scope">
          <span>{{
              scope.row.status == '1' ? '待执行' : scope.row.status == '2' ?
                '进行中' : scope.row.status == '3' ? '改派' : scope.row.status == '4' ? '已完成' : '已作废'
            }}</span>
      </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        :current-page="Number(queryData.page)"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="Number(queryData.pageSize)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 查看详情 -->
    <div class="detail-form">
      <el-dialog title="运单详情" :visible.sync="dialogFormVisible">
<!--        <el-form
          :model="detail"
          label-position="right"
          :disabled="true"
          label-width="100px"
        >

          <el-row>
            <el-col :span="12">
              <el-form-item label="运单编号" prop="id">
                <el-input v-model="detail.id"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="订单编号" prop="orderId">
                <el-input v-model="detail.orderId"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="运单状态">
                <el-input v-if="detail.status==1" value="新建"/>
                <el-input v-else-if="detail.status==2" value="已装车"/>
                <el-input v-else-if="detail.status==3" value="到达"/>
                <el-input v-else-if="detail.status==4" value="到达终端网点"/>
                <el-input v-else-if="detail.status==5" value="已签收"/>
                <el-input v-else value="拒收"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="调度状态">
                <el-input v-if="detail.schedulingStatus==1" value="待调度"/>
                <el-input v-else-if="detail.schedulingStatus==2" value="未匹配线路"/>
                <el-input v-else value="已调度"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="下单时间" prop="order.createTime">
                <el-input v-model="detail.order.createTime"/>
              </el-form-item>
            </el-col>

            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="签收状态">
                <el-input v-if="detail.signStatus==1" value="已签收" />
                <el-input v-else value="拒收" />
              </el-form-item>
            </el-col>&ndash;&gt;
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="收件人姓名" prop="order.receiverName">
                <el-input v-model="detail.order.receiverName"/>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="收件人电话" prop="order.receiverPhone">
                <el-input v-model="detail.order.receiverPhone"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="收件人地址" prop="order.receiverAddress">
                <el-input v-model="detail.order.receiverAddress"/>
              </el-form-item>
            </el-col>

            &lt;!&ndash;<el-col :span="12">
              <el-form-item label="发件人姓名" prop="order.receiverPhone">
                <el-input v-model="detail.order.senderName" />
              </el-form-item>
            </el-col>&ndash;&gt;
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发件人姓名" prop="order.senderName">
                <el-input v-model="detail.order.senderName"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发件人电话" prop="order.senderPhone">
                <el-input v-model="detail.order.senderPhone"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="发件人地址" prop="order.senderAddress">
                <el-input v-model="detail.order.senderAddress"/>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>-->

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import transportOrder from '../../api/work/taskTransport'

export default {
  data() {
    return {
      queryData: {
        page: 1,
        pageSize: 10,

        id: null,
        status: null,
        driverName: '',
        taskTransportId: ''
      },
      total: 10,
      tableData: [],
      dialogFormVisible: false,
      detail: {}
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    changeTruck() {

    },
    changeDriver() {

    },
    onSubmit() {
      this.init()
    },
    handleClick(row) {
      this.detail = row
      this.dialogFormVisible = true
    },
    handleSizeChange(val) {
      this.init()
    },
    handleCurrentChange(val) {
      this.init()
    },
    init() {
      transportOrder
        .init(this.queryData)
        .then((data) => {
          this.tableData = data.data.records
          this.total = data.data.total
          this.queryData.page = data.data.current
          this.queryData.pageSize = data.data.size;
        }).catch((e) => {
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }

  }
}
</script>

<style scoped>

</style>
